<template>
  <el-menu
    :default-active="activeIndex"
    mode="horizontal"
    :ellipsis="true"
    :close-on-click-outside="true"
    :unique-opened="true"
    menu-trigger="click"
    @select="handleSelect"
  >
    <el-menu-item v-for="button in buttons" :key="button.text" :index="button.index">
      <el-button text>
        {{ button.text }}
      </el-button>
    </el-menu-item>
    <el-menu-item index="swith_theme">
      <SwichTheme />
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { ElMenu, ElMenuItem, ElButton, ElMessageBox } from 'element-plus'
import { ref } from 'vue'
import SwichTheme from './SwichTheme.vue'
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
const myAxios = store.myAxios

const MyProps = defineProps<{
  use_name: string
}>()
const activeIndex = ref('1')

const buttons = [
  { text: '新建', index: 'create' },
  { text: '删除', index: 'del' },
  { text: '移动', index: 'move' },
  { text: '复制', index: 'copy' },
  { text: '重命名', index: 'rename' },
  { text: '上传', index: 'upload' },
  { text: '下载', index: 'download' },
  { text: MyProps.use_name, index: 'usename' },
  { text: '登出', index: 'logout' },
]

const handleSelect = (key: string) => {
  switch (key) {
    case 'create':
      create()
      break
    case 'del':
      del()
      break
    case 'move':
      move()
      break
    case 'copy':
      copy()
      break
    case 'rename':
      rename()
      break
    case 'upload':
      upload()
      break
    case 'download':
      download()
      break
    case 'logout':
      logout()
      break
    default:
      break
  }
}
// 新建文件
function create() {
  ElMessageBox.prompt('请输入新建文件的名称', '', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    showClose: false,
    inputPlaceholder: '以/结束为新建文件夹',
    // inputPattern:
    //   /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
    // inputErrorMessage: 'Invalid Email',
  })
    .then(({ value }) => {
      myAxios
        .post('/file/user_get_dirs_and_files', {
          dir_path: value,
        })
        .then(function (response) {
          console.log(value)
          console.log(response)
        })
        .catch(function (error) {
          console.log(error)
        })
    })
    .catch(() => {})
}
// 删除文件
function del() {
  console.log('删除文件')
}
// 移动文件
function move() {
  console.log('移动文件')
}
// 复制文件
function copy() {
  console.log('复制文件')
}
// 重命名文件
function rename() {
  console.log('重命名文件')
}
// 上传文件
function upload() {
  console.log('上传文件')
}
// 下载文件
function download() {
  console.log('下载文件')
}
// 登出
function logout() {
  console.log('登出')
}
</script>

<style scoped>
.el-menu--horizontal > .el-menu-item:nth-child(7) {
  margin-right: auto;
}

.el-menu-item {
  padding: 0px;
  /* height: 100%;
  width: 100%; */
}

.el-button {
  height: 100%;
  width: 100%;
}
</style>
